<!DOCTYPE html>
<!-- saved from url=(0042)http://matsuzaka.3vfree.cn/yanzhengma.html -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
<style>
    * {
        margin: 0;
        padding: 0;
        user-select: none;
        box-sizing: border-box;
    }

    .box {
        position: relative;
        width: 200px;
        margin: 15% auto;
    }

    .box1 {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        background-color: rgba(127, 0, 255, .5);
        color: aliceblue;
    }

    input {
        outline: none;
        width: 200px;
        height: 20px;
        margin: 5px 0;
        text-indent: 5px;
    }

    button {
        width: 200px;
        height: 40px;
    }

    p {
        position: absolute;
        width: 200px;
        top: 54px;
        left: 210px;
        text-align: left;
    }

    .r {
        color: red;
    }

    .g {
        color: green;
    }
</style><style type="text/css">._th-container ._th-item{margin-bottom:3px;position:relative;width:0;height:0;cursor:pointer;opacity:.3;background-color:aquamarine;border-radius:100%;text-align:center;line-height:30px;-webkit-transition:all .35s;-o-transition:all .35s;transition:all .35s;right:30px}._th-container ._th-item,._th-container ._th-click-hover,._th_cover-all-show-times ._th_times{-webkit-box-shadow:-3px 4px 12px -5px black;box-shadow:-3px 4px 12px -5px black}._th-container:hover ._th-item._item-x2{margin-left:18px;width:40px;height:40px;line-height:40px}._th-container:hover ._th-item._item-x-2{margin-left:17px;width:38px;height:38px;line-height:38px}._th-container:hover ._th-item._item-xx2{width:36px;height:36px;margin-left:16px;line-height:36px}._th-container:hover ._th-item._item-xx-2{width:32px;height:32px;line-height:32px;margin-left:14px}._th-container:hover ._th-item._item-reset{width:30px;line-height:30px;height:30px;margin-left:10px}._th-click-hover{position:relative;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;height:45px;width:45px;cursor:pointer;opacity:.3;border-radius:100%;background-color:aquamarine;text-align:center;line-height:45px;right:0}._th-container:hover{left:-5px}._th-container{font-size:12px;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;left:-35px;top:20%;position:fixed;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:100000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}._th-container ._th-item:hover{opacity:.8;background-color:#5fb492;color:aliceblue}._th-container ._th-item:active{opacity:.9;background-color:#1b3a26;color:aliceblue}._th-container:hover ._th-click-hover{opacity:.8}._th-container:hover ._th-item{opacity:.6;right:0}._th-container ._th-click-hover:hover{opacity:.8;background-color:#5fb492;color:aliceblue}._th_cover-all-show-times{position:fixed;top:0;right:0;width:100%;height:100%;z-index:99999;opacity:1;font-weight:900;font-size:30px;color:#4f4f4f;background-color:rgba(0,0,0,0.1)}._th_cover-all-show-times._th_hidden{z-index:-99999;opacity:0;-webkit-transition:1s all;-o-transition:1s all;transition:1s all}._th_cover-all-show-times ._th_times{width:300px;height:300px;border-radius:50%;background-color:rgba(127,255,212,0.51);text-align:center;line-height:300px;position:absolute;top:50%;right:50%;margin-top:-150px;margin-right:-150px}</style></head>


<body>
    <div class="box">
        <div class="box1">nzel</div>
        <input type="text"><br>
        <p></p>
        <button>验证</button>
    </div>

    <script>
        var btn = document.querySelector('button')
        var ipt = document.querySelector('input')
        var div = document.querySelector('.box1')
        var p = document.querySelector('p')

        div.innerHTML = Math.random().toString(36).substr(2).slice(0, 4)
        /*
        Math.random()  随机获取
        toString()      截取36个数 0-9 a-z
        substr()        字符串位移
        slice()         截取字符串 从第0个截取到第4个
        */
        div.onclick = function () {
            div.innerHTML = Math.random().toString(36).substr(2).slice(0, 4)
        };

        btn.onclick = function () {
            if (ipt.value == div.innerHTML) {
                p.innerHTML = '验证成功';
                p.className = 'g'
            } else {
                p.innerHTML = '验证失败';
                p.className = 'r'
            }
        }
    </script>


<div><div class="_th-container">
    <div class="_th-click-hover _item-input">
        x1.00
    </div>
    <div class="_th-item _item-x2">&gt;</div>
    <div class="_th-item _item-x-2">&lt;</div>
    <div class="_th-item _item-xx2">&gt;&gt;</div>
    <div class="_th-item _item-xx-2">&lt;&lt;</div>
    <div class="_th-item _item-reset">O</div>
</div>
<div class="_th_cover-all-show-times _th_hidden">
    <div class="_th_times">x1.00</div>
</div></div></body></html>